<template>
	<div class="monitorAll">
		<span v-for="(item,index) in pathList" :key="index"> 
			<a-card hoverable style="width: 15%;float:left;margin:0.8%;margin-bottom:0.5%;margin-top:0.4%">
    			<video slot="cover" alt="example" poster="" data-setup="{}" preload="auto" controls>
        			<source v-bind:src="item.path" type="rtmp/flv">
				</video>
    			<a-card-meta v-bind:title="item.num"></a-card-meta>
  			</a-card>
		</span>
		<a-pagination v-model="current" :total="this.current" show-less-items :pageSize="18" showQuickJumper style="float:right;margin-right:1%"/>
	</div>
</template>

<script>
export default {
	data(){
		return{
			current: 18,
			pathList:[
				{	num:'501',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'502',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'503',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'504',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'505',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'506',
					path:'rtmp://192.168.31.47:1935/live'
				},

				{	num:'507',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'508',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'509',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'510',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'511',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'512',
					path:'rtmp://192.168.31.47:1935/live'
				},

				{	num:'513',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'514',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'515',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'516',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'517',
					path:'rtmp://192.168.31.47:1935/live'
				},
				{	num:'518',
					path:'rtmp://192.168.31.47:1935/live'
				},
			]
		}
	}
};
</script>

<style lang="scss" scoped>
.monitorAll{
	width:99%;
	height:80%;
	margin-left:1%;
	margin-top:2%;
}
// img{
// 	width:16%;
// 	height:30%;
// 	margin:0.3%;
// 	margin-bottom: 3%;
// }
</style>